<template>
    <div id='auth-apply-wait'>
        <h1 class="card-title">
            <p><span>历史审核</span></p>
            <div class="card-title__button-box">
                <div class="form-item__value">
                    <picker-date picker-id='download-startTime' key='download-startTime' placeholder='下载开始时间' v-model='download_startTime'></picker-date>
                </div>
                <div class="form-item__value">
                    <picker-date picker-id='download-endTime' key='download-endTime' placeholder='下载结束时间' v-model='download_endTime'></picker-date>
                </div>
                <button-loading :loading='loading_download' @click='download'>下载列表</button-loading>  
            </div>
        </h1>
        <div class="card">
            <div class="card1">
                <div class="sub-title-single">本小时机审数据<small> {{statisInfo.time | dateFormat}}更新</small></div>
                <ul class="user-data__list">
                    <li class="user-data__item col-4">
                        <div class="user-data__wrap">
                            <p>处理</p>
                            <span> {{ statisInfo.dealCount || placeholder }} 
                            </span>
                        </div>
                    </li>
                    <li class="user-data__item col-4 user-data__item1">
                        <div class="user-data__wrap">
                            <p>审核通过</p>
                            <span> {{ statisInfo.passCount || placeholder }} 
                                <i v-if='statisInfo.passRateUp === true' class="iconfont icon-shangsheng"></i>
                                <i v-if='statisInfo.passRateUp === false' class="iconfont icon-xiajiang"></i></span>
                            <i class="iconfont icon-jinggao" v-if='statisInfo.passRateWarning'></i>
                        </div>
                    </li>
                    <li class="user-data__item col-4 user-data__item1">
                        <div class="user-data__wrap">
                            <p>审核拒绝</p>
                            <span> {{ statisInfo.rejectCount || placeholder }} 
                                <i v-if='statisInfo.rejectRateUp === true' class="iconfont icon-shangsheng"></i>
                                <i v-if='statisInfo.rejectRateUp === false' class="iconfont icon-xiajiang"></i></span>
                            <i class="iconfont icon-jinggao" v-if='statisInfo.rejectRateWarning'></i>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="card2">
                <div class="sub-title-single">所有机审数据<small> {{statisInfo.time | dateFormat}}更新</small></div>
                <ul class="user-data__list">
                    <li class="user-data__item col-4">
                        <div class="user-data__wrap">
                            <p>处理</p>
                            <span> {{ statisInfo.allDealCount || placeholder }}  </span>
                        </div>
                    </li>
                    <li class="user-data__item col-4 user-data__item1">
                        <div class="user-data__wrap">
                            <p>审核通过</p>
                            <span> {{ statisInfo.allPassCount || placeholder }}   </span>
                        </div>
                    </li>
                    <li class="user-data__item col-4 user-data__item1">
                        <div class="user-data__wrap">
                            <p>审核拒绝</p>
                            <span> {{ statisInfo.allRejectCount || placeholder }}   </span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="card">
            <div class="sub-title-single">审核列表</div>
            <div class="form-table">
                <div class="form-content">
                    <div class="form-item">
                        <div class="form-item__key">手机号：</div>
                        <div class="form-item__value form-item__value1">
                            <input type="text" placeholder="请输入手机号码" v-model='phone'>
                        </div>
                    </div>

                    <div class="form-item">
                        <div class="form-item__key">审核客服筛选：</div>
                        <div class="form-item__value  form-item__value1">
                            <select-group v-model='operatorSelect'>
                                <select-option value='' text='所有'></select-option>
                                <select-option value='1' text='人工'></select-option>
                                <select-option value='2' text='自动'></select-option>
                            </select-group>
                        </div>
                    </div>

                    <div class="form-item">
                        <div class="form-item__key">机审结果筛选：</div>
                        <div class="form-item__value  form-item__value1">
                            <select-group v-model='resultSelect'>
                                <select-option value='' text='所有'></select-option>
                                <select-option value='1' text='通过'></select-option>
                                <select-option value='2' text='拒绝'></select-option>
                                <select-option value='3' text='错误'></select-option>
                            </select-group>
                        </div>
                    </div>

                    <div class="form-item">
                        <div class="form-item__key">开始时间：</div>
                        <div class="form-item__value  form-item__value1">
                            <picker-date picker-id='startTime' :key='startTime' placeholder='请选择开始时间' v-model='startTime'></picker-date>
                        </div>
                    </div>

                    <div class="form-item">
                        <div class="form-item__key">结束时间：</div>
                        <div class="form-item__value  form-item__value1">
                            <picker-date picker-id='endTime' :key='endTime' placeholder='请选择结束时间' v-model='endTime'></picker-date>
                        </div>
                    </div>
                <a class="card-title__button" @click='getList()'>确定</a>
                </div>
            </div>
        </div>
        
        <div class="loading-min-height">
            <loading v-if='loading' mode='full'></loading>
            <transition name='fade'>
                <p class='no-data' v-if='!loading && !records.length'>暂无数据</p>
                <div class="table-list" v-if='records.length'>
                    <table>
                        <thead class="table-list__head">
                            <tr>
                                <th>订单号</th>
                                <th>申请人</th>
                                <th>提交时间</th>
                                <th>审核时间</th>
                                <th>机审时间</th>
                                <th>机审结果</th>
                                <th>审核客服</th>
                                <th>来源渠道</th>
                                <th>审核结果</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody class='table-list__body have-border'>
                            <tr v-for='item in records'>
                                <td>{{ item.id || placeholder }}</td>
                                <td>{{ item.name || placeholder }}</td>
                                <td>{{ item.submitTime || placeholder }}</td>
                                <td>{{ item.checkTime || placeholder }}</td>
                                <td>{{ item.autoCheckTime || placeholder }}</td>
                                <td>{{ item.autoCheckStatusStr || placeholder }}</td>
                                <td>{{ item.authByStr || placeholder }}</td>
                                <td>{{ item.source || placeholder }}</td>
                                <td>{{ item.statusStr || placeholder }}</td>
                                <td>
                                    <div class='option-box'>
                                        <span class='option-button' @click='goAuthDetail(item.id)'>查看</span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                         <el-pagination class="pan" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listInfo.pageNum" :page-sizes="[12,50, 100, 200]" :page-size="listInfo.pageSize" layout="total,  prev, pager, next, jumper" 
                        :total="listInfo.totalCount" :background="true">
                        </el-pagination>
                </div>
            </transition>
        </div>
            
        </modal>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import datePicker from '../components/DatePicker.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import toYuan from '../filters/filter-toYuan'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { loanApi, authApi, allApi, lenderApi } from '../api/api'
    import moment from 'moment'


    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            tabBox,
            tab,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            datePicker
        },
        filters:{
            dateFormat,
            toYuan,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        data() {
            return {
                placeholder:'--',
                loading_download:false,
                download_startTime:'',
                download_endTime:'',
                operatorSelect:{
                    value:'',
                    text:'所有'
                },
                resultSelect:{
                    value:'',
                    text:'所有'
                },
                startTime:'',
                endTime:'',
                statisInfo:{},
                listInfo:{},
                records:[],
                phone:'',
                loading:true,
                pageSize:12,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            hasUserCount(){
                return !_.isEmpty(this.userCount)
            },
            noEditObject(){
                return _.isEmpty(this.editObject)
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),
              handleSizeChange(val){
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.getList();
            },
            handleCurrentChange(val){
                console.log(`当前页: ${val}`);
                this.getList(val);
            },
            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },

            // function
            download(){
                this.loading_download = true
                authApi.authDataToExcel({
                    stringDateFrom:this.download_startTime,
                    stringDateTo:this.download_endTime,
                })
                .then(result=>{
                    this.loading_download = false
                    this.setMsgTip({
                        text:'正在下载',
                        type:'success'
                    })
                    location.href = result.downloadUrl
                })
                .catch(error => {
                    this.loading_download = false
                    console.error(error)
                })
            },
            getList(num = 1){
                this.loading = true
                authApi.historyCheckList({
                    pageSize:this.pageSize,
                    pageIndex:num,
                    phone:this.phone,
                    authBy:this.operatorSelect.value,
                    autoAuthStatus:this.resultSelect.value,
                    stringDateFrom:this.startTime,
                    stringDateTo:this.endTime
                })
                .then(result=>{
                    this.loading = false
                    this.listInfo = result
                    this.records = result.records
                    if(result.totalPage < result.pageNum){
                        this.getList(result.totalPage)
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            getAllStatisInfo(){
                authApi.allStatisInfo()
                .then(result=>{
                    this.statisInfo = result
                })
                .catch(error => {
                    console.error(error)
                })
            },
            goAuthDetail(id){
                this.$router.replace({
                    name:'auth-apply-history',
                    query:_.merge({},this.$route.query,{
                        num:this.listInfo.pageNum
                    })
                })
                this.$router.push({
                    name:'auth-apply-history-detail',
                    params:{
                        id:id
                    }
                })
            },
        },
        created(){
            // this.getAccount()
            this.getAllStatisInfo()
            let num = this.$route.query.num
            this.getList(num)
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    #auth-apply-wait{
        padding:0 40px 20px 40px;
        box-sizing:border-box;
        overflow:auto;
    }
</style>